<template>
    <app-dialog class="filter_add" v-model="show" width="600px" :title="title" @open="handleOpen()">
        <div style="margin: 0 40px;">
            <el-form :model="state.filterOptions" label-width="114px" ref="formRef" :rules="rules">
                <el-form-item label="过滤器名称：" prop="filter_name" required>
                    <el-input class="filter_name_input" v-model="state.filterOptions.filter_name" />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <el-button class="button" @click="savefilter()">保存</el-button>
        </template>
    </app-dialog>

</template>

<script setup>
const show = defineModel({ type: Boolean })
const props = defineProps({
    title: String,
})
const { store, state } = inject('Filter')
const formRef = ref(null)

const rules = ref({
    filter_name: [{ required: true, message: '请输入过滤器名称', trigger: 'blur' },]
})

const handleOpen = () => { }

const savefilter = () => {
    formRef.value.validate().then(async () => {
        store.savefilter()
    })
}

</script>

<style lang="scss" scoped>
.button,
.button:hover {
    width: 60px;
    height: 32px;
    background-color: var(--pcmain-color);
    border-color: var(--pcmain-color);
    font-size: 14px;
    color: #fff;
}
</style>


<style>
.filter_name_input .el-input__wrapper {
    border-radius: 0 !important;
}
</style>